<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <%include("/common/header.html",{title:''}){}%>
    <title>登入</title>
    <base href="${ctxPath}/">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <!--  <link rel="stylesheet" href="static/layuiadmin/layui/css/layui.css" media="all">-->
    <!--  <link rel="stylesheet" href="static/layuiadmin/layui/css/login.css" media="all">-->
    <link rel="stylesheet" media="screen" href="css/login/style.css">
    <link rel="stylesheet" type="text/css" href="css/login/reset.css"/>
    <style>
        .layui-elem-quote {
            background-color: inherit !important;
        }

        .layui-input, .layui-select, .layui-textarea {
            background-color: inherit;
            padding-left: 30px;
        }

        #wxImg {
            display: none;
        }

        #movse:hover #wxImg {
            display: block;
        }

        #movse:hover #aa {
            color: #009688;
        }

        #wx {
            display: none;
        }

        #gzh:hover #wx {
            display: block;
        }

        #gzh:hover #bb {
            color: #009688;
        }
    </style>
</head>
<body>


<div id="particles-js">
    <img src="img/logo.png" style="width: 30%;height: 15%">
    <img src="img/b1.png" style="width: 10%;height: 15%;margin-top: 45px;margin-left: 130px">
    <img src="img/b1.png" style="width: 10%;height: 15%;margin-top: 45px;">
    <div class="login">
        <div class="login-top" style="text-align: center;margin-top: 5%">

            <div style="font-size: small;color: black;margin-top: 20px">
                <div style="text-align: center">北京冬奥会监测与反馈平台</div>
            </div>
        </div>
        <div class="login-center clearfix">
            <div class="login-center-img"><img src="img/name.png"/></div>
            <div class="login-center-input">
                <input type="text" name="userName" id="userName" value="" placeholder="请输入您的用户名"
                       onfocus="this.placeholder=''"
                       onblur="this.placeholder='请输入您的用户名'"/>
                <div class="login-center-input-text">用户名</div>
            </div>
        </div>
        <div class="login-center clearfix">
            <div class="login-center-img"><img src="img/password.png"/></div>
            <div class="login-center-input">
                <input type="password" name="passWord" id="passWord" placeholder="请输入您的密码" onfocus="this.placeholder=''"
                       onblur="this.placeholder='请输入您的密码'"/>
                <div class="login-center-input-text">密码</div>
            </div>
        </div>
        <div class="login-center clearfix">
            <div class="login-center-img"><img src="img/password.png"/></div>
            <div class="login-center-input">
                <input type="text" style="width: 55%" name="captchacode" id="vercode" value="" placeholder="验证码"
                       onfocus="this.placeholder=''" onblur="this.placeholder='验证码'"/>
                <div class="login-center-input-text">验证码</div>
                <img style="height: 30px;" src="captcha/captchaImage.jhtml?type=math"
                     class="layadmin-user-login-codeimg" id="restcode">
            </div>
        </div>
        <div class="login-center clearfix" style="">
            <div class="login-center-input">
                <input type="checkbox" name="checkbox" id="checkbox" lay-skin="primary" title="记住密码"
                       style="height: 20px;margin-left: -85px"/>
                <div style="margin-left: 50px;margin-top: -20px">记住密码</div>
            </div>
        </div>
        <div class="login-button">
            登录
        </div>
    </div>
    <div class="sk-rotating-plane"></div>
</div>



</body>
<%include("/common/foot.html"){}%>

<script src="js/login/particles.min.js"></script>
<script src="js/login/app.js"></script>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.js"></script>

<!--<script type="text/javascript">-->
<!---->
<!--// //二维码-->
<!--// function showImg(){-->
<!--//     document.getElementById("wxImg").style.display='block';-->
<!--// }-->
<!--// function hideImg(){-->
<!--//     document.getElementById("wxImg").style.display='none';-->
<!--// }-->
<!--</script>-->
<!-- 记住密码-->
<script language="javascript" type="text/javascript">
    function hasClass(elem, cls) {
        cls = cls || '';
        if (cls.replace(/\s/g, '').length == 0) return false; //当cls没有参数时，返回false
        return new RegExp(' ' + cls + ' ').test(' ' + elem.className + ' ');
    }

    function addClass(ele, cls) {
        if (!hasClass(ele, cls)) {
            ele.className = ele.className == '' ? cls : ele.className + ' ' + cls;
        }
    }

    function removeClass(ele, cls) {
        if (hasClass(ele, cls)) {
            var newClass = ' ' + ele.className.replace(/[\t\r\n]/g, '') + ' ';
            while (newClass.indexOf(' ' + cls + ' ') >= 0) {
                newClass = newClass.replace(' ' + cls + ' ', ' ');
            }
            ele.className = newClass.replace(/^\s+|\s+$/g, '');
        }
    }

    function setCookie() {
        var userName = $("#userName").val();
        var passWord = $("#passWord").val();

        $.cookie("checkbox", "true", {
            expires: 7
        });
        $.cookie("userName", userName, {
            expires: 7
        });
        $.cookie("pwd", passWord, {
            expires: 7
        });

    }

</script>
<script>
    window.onload = function (ev) {
        if (window.parent.window != window) {
            top.location.href = location.href;
        }

        //获取cookie
        if ($.cookie("checkbox")) {
            $("#checkbox").attr("checked", true);
            $("#userName").val($.cookie("userName"));
            $("#passWord").val($.cookie("pwd"));
        }

    };

    layui.config({
        base: 'static/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['form', 'carousel', 'index', 'user', 'upload'], function () {
        var $ = layui.$,
            setter = layui.setter,
            admin = layui.admin,
            form = layui.form,
            router = layui.router(),
            upload = layui.upload,
            search = router.search;

        form.render();


        document.querySelector(".login-button").onclick = function () {
            $("#checkbox").attr("checked","checked")
            var flag = $("#checkbox").prop("checked");
            if (flag) {
                setCookie();
                addClass(document.querySelector(".login"), "active")
                addClass(document.querySelector(".sk-rotating-plane"), "active")
                document.querySelector(".login").style.display = "none"
                //请求登入接口
                $.ajax({
                    url: 'login/verification.jhtml',
                    data: {
                        userName: $("#userName").val(),
                        passWord: $("#passWord").val(),
                        captchacode: $("#vercode").val()
                    },
                    type: 'post',
                    success: function (res) {
                        if (res.code == 0) {
                            addClass(document.querySelector(".login"), "active")
                            addClass(document.querySelector(".sk-rotating-plane"), "active")
                            document.querySelector(".login").style.display = "none"
                            //请求成功后，写入 access_token
                            layui.data(setter.tableName, {
                                key: setter.request.tokenName,
                                value: res.result
                            });
                            //登入成功的提示与跳转
                            layer.msg('登入成功', {
                                offset: '15px',
                                icon: 1,
                                time: 1000
                            }, function () {
                                location.href = 'admin.jhtml'; //后台主页
                            });
                        } else if (res.code == 403) {
                            removeClass(document.querySelector(".login"), "active")
                            removeClass(document.querySelector(".sk-rotating-plane"), "active")
                            document.querySelector(".login").style.display = "block"
                            layer.msg(res.msg, {
                                offset: '15px',
                                icon: 2,
                                time: 1000
                            })
                        } else {
                            removeClass(document.querySelector(".login"), "active")
                            removeClass(document.querySelector(".sk-rotating-plane"), "active")
                            document.querySelector(".login").style.display = "block"
                        }
                    }
                    // done: function (res) {
                    //
                    // }
                });
            }else{
                $.cookie("checkbox", "false", {
                    expires: -1
                });
                $.cookie("userName", '', {
                    expires: -1
                });
                $.cookie("pwd", '', {
                    expires: -1
                });

                addClass(document.querySelector(".login"), "active")
                addClass(document.querySelector(".sk-rotating-plane"), "active")
                document.querySelector(".login").style.display = "none"
                //请求登入接口
                $.ajax({
                    url: 'login/verification.jhtml',
                    data: {
                        userName: $("#userName").val(),
                        passWord: $("#passWord").val(),
                        captchacode: $("#vercode").val()
                    },
                    type: 'post',
                    success: function (res) {
                        if (res.code == 0) {
                            addClass(document.querySelector(".login"), "active")
                            addClass(document.querySelector(".sk-rotating-plane"), "active")
                            document.querySelector(".login").style.display = "none"
                            //请求成功后，写入 access_token
                            layui.data(setter.tableName, {
                                key: setter.request.tokenName,
                                value: res.result
                            });
                            //登入成功的提示与跳转
                            layer.msg('登入成功', {
                                offset: '15px',
                                icon: 1,
                                time: 1000
                            }, function () {
                                location.href = 'admin.jhtml'; //后台主页
                            });
                        } else if (res.code == 403) {
                            removeClass(document.querySelector(".login"), "active")
                            removeClass(document.querySelector(".sk-rotating-plane"), "active")
                            document.querySelector(".login").style.display = "block"
                            layer.msg(res.msg, {
                                offset: '15px',
                                icon: 2,
                                time: 1000
                            })
                        } else {
                            removeClass(document.querySelector(".login"), "active")
                            removeClass(document.querySelector(".sk-rotating-plane"), "active")
                            document.querySelector(".login").style.display = "block"
                        }
                    }
                    // done: function (res) {
                    //
                    // }
                });

            }

        }


        $("#shiyong").click(function () {
            var a = layer.open({
                type: 1,
                title: '试用信息填写',
                content: $('#layuiadmin-form-useradmin'),
                btn: ['关闭'], //可以无限个按钮
                cancel: function (index, layero) {//取消事件
                    location.replace(location.href);　//layer.open关闭刷新
                },
                success: function (layero, index) {
                    layer.iframeAuto(index);
                }
            });
            layer.full(a);
        });
        var files = [];
        upload.render({
            elem: '#test2',
            //,url: 'https://httpbin.org/post' //改成您自己的上传接口
            auto: false,
            multiple: true,
            number: 10,
            choose: function (obj) {
                files = obj.pushFile();
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    $('#fabing').append('<img src="' + result + '" alt="' + file.name + '" id="remove_' + index + '" title="双击删除该图片" class="layui-upload-img">');
                    $('#remove_' + index).bind('dblclick', function () {//双击删除指定预上传图片
                        delete files[index];//删除指定图片
                        $(this).remove();
                    })
                });
            }
        });
        form.on('submit(component-form-element)', function (data) {
            var formData = new FormData();
            formData.append("data", JSON.stringify(data.field));
            for (let i in files) {
                formData.append("file", files[i]);
            }
            $.ajax({
                url: 'ontrial/update.jhtml',
                type: "post",
                data: formData,
                processData: false,
                contentType: false,
                success: function (data) {
                    if (data.code === 0) {
                        layer.closeAll();
                        layer.msg(data.msg, {
                            time: 1000,
                            icon: 1
                        }, function () {
                            location.replace(location.href);
                        })
                    } else {
                        layer.msg(data.msg, {
                            icon: 5
                        })
                    }
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    var esta = "Page:" + window.location.pathname + ",Function:postUpdate()";
                    layer.open({
                        title: "错误信息",
                        type: 2,
                        content: "base/error.jhtml?info=" + esta,
                        btn: ['关闭']
                    })
                }
            })
        });
        $("#restcode").on('click', function () {
            this.src = "captcha/captchaImage.jhtml?type=math&s=" + Math.random();
        });


        //提交
        form.on('submit(LAY-user-login-submit)', function (obj) {
            var flag = $("#checkbox").prop("checked");
            if (flag) {
                setCookie();   //点击记住密码，存入方法

                //请求登入接口
                $.ajax({
                    url: 'login/verification.jhtml',
                    data: obj.field,
                    type: 'post',
                    success: function (res) {
                        if (res.code == 0) {
                            //请求成功后，写入 access_token
                            layui.data(setter.tableName, {
                                key: setter.request.tokenName,
                                value: res.result
                            });
                            //登入成功的提示与跳转
                            layer.msg('登入成功', {
                                offset: '15px',
                                icon: 1,
                                time: 1000
                            }, function () {
                                location.href = 'admin.jhtml'; //后台主页
                            });
                        } else if (res.code == 403) {
                            layer.msg(res.msg, {
                                icon: 2,
                                time: 1000,
                                offset: ['100px', '700px']
                            })
                        }
                    }
                    // done: function (res) {
                    //
                    // }
                });
            } else {
                $.cookie("checkbox", "false", {
                    expires: -1
                });
                $.cookie("userName", '', {
                    expires: -1
                });
                $.cookie("pwd", '', {
                    expires: -1
                });

                //请求登入接口
                $.ajax({
                    url: 'login/verification.jhtml',
                    data: obj.field,
                    type: 'post',
                    success: function (res) {
                        if (res.code == 0) {
                            //请求成功后，写入 access_token
                            layui.data(setter.tableName, {
                                key: setter.request.tokenName,
                                value: res.result
                            });
                            //登入成功的提示与跳转
                            layer.msg('登入成功', {
                                offset: '15px',
                                icon: 1,
                                time: 1000
                            }, function () {
                                location.href = 'admin.jhtml'; //后台主页
                            });
                        } else if (res.code == 403) {
                            layer.msg(res.msg, {
                                icon: 2,
                                time: 1000,
                                offset: ['100px', '700px']
                            })
                        }
                    }
                });

            }
        });
        //设置轮播主体高度
        var zyl_login_height = $(window).height() / 1.3;
        var zyl_car_height = $(".zyl_login_height").css("cssText", "height:" + zyl_login_height + "px!important");


        //Login轮播主体
        layui.carousel.render({
            elem: '#zyllogin'//指向容器选择器
            , width: '100%' //设置容器宽度
            , height: 'zyl_car_height'
            // , arrow: 'always' //始终显示箭头
            , anim: 'fade' //切换动画方式
            , autoplay: false //是否自动切换false true
            , arrow: 'none' //切换箭头默认显示状态||不显示：none||悬停显示：hover||始终显示：always
            , indicator: 'none' //指示器位置||外部：outside||内部：inside||不显示：none
            // , interval: '5000' //自动切换时间:单位：ms（毫秒）
        });

        //监听轮播--案例暂未使用
        layui.carousel.on('change(zyllogin)', function (obj) {
            var loginCarousel = obj.index;
        });

    });

</script>

</html>